<template>
  <div>
    <navbar title="许愿墙" isLeft="2" />
    <div class="contiainer">
      <van-field placeholder="输入心愿" v-model="wish.title" />
    </div>

    <van-row>
      <van-col
        :span="4"
        align="center"
        v-for="(item, index) in images"
        :key="index"
        @click="wish.colorIndex = index"
        ><div
          class="box"
          :class="{ active: index === wish.colorIndex }"
          :style="{ backgroundImage: `url(${item})` }"
        ></div
      ></van-col>
    </van-row>
    <van-button
      type="primary"
      block
      round
      v-if="wish.title != '' && wish.colorIndex > -1"
      @click="addWish"
    >
      许愿吧
    </van-button>
    <van-button type="warning" disabled block round v-else
      >反正也不会实现 ^-^.</van-button
    >
      <div class="target">
    <div class="container">

      <div
        class="wish_card"
        :style="{ backgroundImage: `url(${images[item.colorIndex]})`,left:item.l,top:item.t }"
        v-for="(item, index) in $store.state.wish_list"
        :key="index"
        v-drag="item"
      >
        {{ item.title }}
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "./navbar";
export default {
  components: {
    navbar,
  },
  data() {
    return {
      images: [
        "/images/img1.jpg",
        "/images/img2.jpg",
        "/images/img3.jpg",
        "/images/img4.jpg",
        "/images/img5.jpg",
      ],
      wish: {
        title: "",
        colorIndex: -1,
      },
      wish_list: [],
    };
  },

  methods: {
    addWish() {
      this.$store.commit("addCard", this.wish);

      this.wish = {
        title: "",
        colorIndex: "",
      };
      this.$toast.success("牛逼！");
    },
  },
  directives:{
    drag:{
      inserted(el, binding){
        el.style.position = "absolute";
        el.style.top = parseInt(Math.random()*100) +'px'
        el.style.left = parseInt(Math.random()*100) +'px'
         var maxW = document.documentElement.clientWidth;
        var maxH = document.documentElement.clientHeight;
        document.querySelector('.container').style.width = maxW;
        var target = el;
        var startX = 0;
        var startY = 0;
        
        target.addEventListener('touchstart', function(e){
            startX = e.targetTouches[0].pageX - this.offsetLeft;
            startY = e.targetTouches[0].pageY - this.offsetTop;
        });
        target.addEventListener('touchmove', function(e){
            var leftX = e.targetTouches[0].pageX - startX;
            var topY = e.targetTouches[0].pageY - startY;
            var thisW = e.targetTouches[0].target.clientWidth;
            var parentW = e.targetTouches[0].target.offsetParent.clientWidth;
            var thisH = e.targetTouches[0].target.clientHeight;
            var parentH = e.targetTouches[0].target.offsetParent.clientHeight;

            if(leftX <= 0){
                leftX = 0;
            }

            if(leftX >= parentW - thisW){
                leftX = parentW - thisW;
            }

            if(topY <= 0){
                topY = 0;
            }

            if(topY >= parentH - thisH){
                topY = parentH - thisH;
            }

            this.style.left = leftX + 'px';
            this.style.top = topY + 'px';
            // this.innerHTML = '我又被揪起来了，真烦人!';
        });
        target.addEventListener('touchend', function(e){
            // this.innerHTML = '你终于放弃揪着我了，谢谢!';
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.van-field {
  border: #ddd 1px solid;
  margin: 2%;
  width: 96%;
  box-sizing: border-box;
}
.target{
  position: relative;
  width: 100%;
  height: 400px;
}
.box {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: 10px;
  margin-bottom: 10px;
  background-size: 100% 100%;
}
.box.active {
  border: brown 1px solid;
  width: 55px;
  height: 55px;
}
.wish_card {
  width: 120px;
  height: 120px;
  color: #f0f0f0;

  background-size: 100% 100%;
}
</style>

